<template>
  <div>
    <a-row>
      <a-input-search v-model:value="searchKey" placeholder="请输入穿心解卡工具信息" enter-button="搜索"
        style="width: 250px; margin-bottom: 10px;" @search="handleQuery()" />
      <a-button style="margin-left: 10px;" type="dashed" @click="reset">重置</a-button>
      <a-button type="primary" style="margin-left: auto; margin-bottom: 10px; width: 100px;" @click="addItem">
        <template #icon><plus-outlined /></template>新增
      </a-button>
    </a-row>
    <a-table :dataSource="dataSource" :columns="props.columns" :scroll="{ x: 1000 }" bordered :pagination="false">
      <template #bodyCell="{ column, text, record }">
        <template v-if="column.dataIndex === 'picture'">
          <div style="margin-bottom: 15px">
            <a-image :width="50" style="height: 100" :src="`/dev-api/ufs/preview/${record.pictureId}`" />
          </div>
        </template>
        <template v-else-if="column.dataIndex === 'action'">
          <div>
            <span>
              <a-button type="link" @click="editItem(record)">编辑</a-button>
              <AntdZh><a-popconfirm title="确定删除该条记录 ?" @confirm="del(record.id)">
                  <a-button type="link" danger>删除</a-button>
                </a-popconfirm></AntdZh>
            </span>
          </div>
        </template>
      </template>
    </a-table>
    <AntdZh>
      <a-pagination v-model:current="query.pageNum" v-model:pageSize="query.pageSize" :total="total" @change="getList" />
    </AntdZh>

    <!-- 新增对话框 -->
    <AntdConfirmModal :title="title ? '新增工具' : '修改工具'" ref="modalRef" width="700px" :keepSlot="false"
      @confirm="submitForm">
      <a-form :model="form" name="basic" :label-col="{ span: 8 }">
        <a-row>
          <a-col :span="12">
            <a-form-item label="名称" name="name">
              <a-input v-model:value="props.toolType" style="width: 180px;" placeholder="请输入名称" disabled="true" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="型号" name="model">
              <a-input v-model:value="form.model" style="width: 180px;" controls-position="right" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="工具类别" name="toolType">
              <a-input v-model:value="form.toolType" style="width: 180px;" controls-position="right" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="外形尺寸" name="shapeSize">
              <a-input-number v-model:value="form.shapeSize" style="width: 180px;" controls-position="right" :min="0"
                addon-after="mm" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="编号" name="serialNumber">
              <a-input v-model:value="form.serialNumber" style="width: 180px;" controls-position="right" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="承拉载荷" name="tensileLoad">
              <a-input-number v-model:value="form.tensileLoad" style="width: 180px;" controls-position="right"
                addon-after="KN" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="探伤" name="flawDetection">
              <a-input v-model:value="form.flawDetection" style="width: 180px;" controls-position="right" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="额定载荷" name="loadRating">
              <a-input-number v-model:value="form.loadRating" style="width: 180px;" controls-position="right"
                addon-after="KN" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="材质" name="material">
              <a-input v-model:value="form.material" style="width: 180px;" controls-position="right" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="其他" name="other">
              <a-input v-model:value="form.other" style="width: 180px;" controls-position="right" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="照片">
              <a-upload v-model:fileList="fileList" name="file" :before-upload="beforeUpload" :maxCount="1"
                @remove="handleRemove">
                <a-button>
                  <upload-outlined></upload-outlined>
                  Click to Upload
                </a-button>
              </a-upload>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </AntdConfirmModal>
  </div>
</template>
<script setup>
import { queryList, deleteOne, updateOne, createOne } from "@/api/tool/groundTool.js";
import { PlusOutlined } from '@ant-design/icons-vue';
import request from '@/utils/request'
import useApp from "@/hooks";
const { $, proxy } = useApp();
const modalRef = ref(null);
const total = ref(1)
const searchKey = ref();
const data = reactive({
  form: {}
});
const { form } = toRefs(data);
const title = ref(null);
const dataSource = ref([]);
const props = defineProps({
  toolType: {
    type: String,
  },
  columns: {
    type: Array,
  },
});
const query = ref({ pageNum: 1, pageSize: 10, sortBy: 'id', searchKey: '', name: props.toolType, toolType: '' });
const fileList = ref([]);
const fileForm = ref({
  file: null,
});
watch(() => props.toolType, () => {
  getList()
});
const beforeUpload = (file) => {
  // 记录文件
  fileForm.value.file = file;
  // 直接停止上传
  return false;
};
// 移除文件
const handleRemove = (file) => {
  fileForm.value.file = null;
};

// 新增
function addItem() {
  title.value = true;
  form.value = {}
  modalRef.value.openModal()
}
// 删除
const del = key => {
  deleteOne(key).then(res => {
    $.showToast({
      title: '删除成功',
      icon: 'success'
    })
    getList()
  })
}
//编辑
function editItem(e) {
  form.value = e;
  title.value = false;
  modalRef.value.openModal();
}
/** 提交按钮 */
function submitForm() {
  form.value.name = props.toolType
  form.value.picture = fileForm.value.file
  console.log('form.value', form.value)
  if (title.value == true) {
    request.post("/salvage/groundTool/add", form.value, {
      headers: {
        "Content-Type": "multipart/form-data",
      },
    }).then((res) => {
      console.log('groundTool', res);
      $.showToast({
        title: "新建成功",
        icon: "success",
      });
      getList()
    });
  } else if (title.value == false) {
    updateOne(form.value).then((res) => {
      $.showToast({
        title: "修改成功",
        icon: "success",
      });
      getList()
    });
  }
  modalRef.value.closeModal()
}

function getList() {
  query.value.name = props.toolType
  queryList(query.value).then((response) => {
    dataSource.value = response.content;
    total.value = response.totalElements;
  });
}
getList();


/** 搜索按钮操作 */
function handleQuery() {
  query.value.searchKey = searchKey;
  getList();
}

/** 表单重置 */
function reset() {
  searchKey.value = '';
  query.value = { pageNum: 1, pageSize: 10, sortBy: 'id', searchKey: '', name: props.toolType, toolType: '' }
  getList();
}
</script>